<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Selected Shakespeare Plays</title>
    <link rel="stylesheet" href="02.css" type="text/css" />
    <script src="js/jquery.js"></script>
    <script>
        $(function () {
            // 1.给位于嵌套列表第二个层次的所有<li>元素添加special类
            $("#selected-plays > li li").addClass("special");
            // 2.给位于表格第三列的所有单元格添加year类
            $("table tr:nth-child(3) td").addClass("year");
            // 3.为表格中包含文本Tragedy的第一行添加special类
            $("table tr td:contains(Tragedy)").parent().addClass("special");
            // 4.选择包含链接<a>的所有列表项<li>,为每个选中的列表项的同辈列表项元素添加afterlink类
            $("li a").parent().parent().children().addClass("afterlink");
            // 5.为与.pdf链接最近的祖先元素<ul>添加tragedy类
            $("a[href$='.pdf']").parent().parent().addClass("tragedy");
        })

    </script>
</head>
<body>
<div id="container">
    <h2>Selected Shakespeare Plays</h2>
    <ul id="selected-plays" class="clear-after">
        <li>Comedies
            <ul>
                <li><a href="/asyoulikeit/">As You Like It</a></li>
                <li>All's Well That Ends Well</li>
                <li>A Midsummer Night's Dream</li>
                <li>Twelfth Night</li>
            </ul>
        </li>
        <li>Tragedies
            <ul>
                <li><a href="hamlet.pdf">Hamlet</a></li>
                <li>Macbeth</li>
                <li>Romeo and Juliet</li>
            </ul>
        </li>
        <li>Histories
            <ul>
                <li>Henry IV (<a href="mailto:henryiv@king.co.uk">email</a>)
                    <ul>
                        <li>Part I</li>
                        <li>Part II</li>
                    </ul>
                </li>
                <li><a href="http://www.shakespeare.co.uk/henryv.htm">Henry V</a></li>
                <li>Richard II</li>
            </ul>
        </li>
    </ul>

    <h2>Shakespeare's Plays</h2>
    <table>
        <tr>
            <td>As You Like It</td>
            <td>Comedy</td>
            <td></td>
        </tr>
        <tr>
            <td>All's Well that Ends Well</td>
            <td>Comedy</td>
            <td>1601</td>
        </tr>
        <tr>
            <td>Hamlet</td>
            <td>Tragedy</td>
            <td>1604</td>
        </tr>
        <tr>
            <td>Macbeth</td>
            <td>Tragedy</td>
            <td>1606</td>
        </tr>
        <tr>
            <td>Romeo and Juliet</td>
            <td>Tragedy</td>
            <td>1595</td>
        </tr>
        <tr>
            <td>Henry IV, Part I</td>
            <td>History</td>
            <td>1596</td>
        </tr>
        <tr>
            <td>Henry V</td>
            <td>History</td>
            <td>1599</td>
        </tr>
    </table>
    <h2>Shakespeare's Sonnets</h2>
    <table>
        <tr>
            <td>The Fair Youth</td>
            <td>1–126</td>
        </tr>
        <tr>
            <td>The Dark Lady</td>
            <td>127–152</td>
        </tr>
        <tr>
            <td>The Rival Poet</td>
            <td>78–86</td>
        </tr>
    </table>
</div>
</body>
</html>
